<template>
  <MessageBubble :isMine="isMine">
    <template v-for="(item, index) in contentList">
      <span :key="index" v-if="item.name === 'text'">{{ item.text }}</span>
      <img v-else-if="item.name === 'img'" v-lazy="item.src" width="20px" height="20px" :key="index"/>
    </template>
  </MessageBubble>
</template>

<script>
import MessageBubble from '../MessageBubble';
import { decodeText } from '../../../utils/decodeText'

export default {
  name: 'TextElement',
  components: {
    MessageBubble
  }, 
  props: {
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean
    }
  },
  computed: {
    contentList() {
      return decodeText(this.message.payload);
    }
  }
}
</script>